<template>
    <el-dialog :draggable="true" :destroy-on-close="true" :model-value="checkDialog" @close="onCancel"
        :close-on-click-modal="false" width="80%" top="8vh" class="check-dialog">
        <template #header>
            <span> 审核配件 &nbsp;<el-tag type="warning">待审核</el-tag></span>
        </template>
        <div v-loading="loading" element-loading-text="加载中...">
            <p class="top_no" v-if="detailData">配件编号：{{ detailData.code }} &nbsp; 工单单号：{{ detailData.workNo }}</p>
            <h4 class="title_top">基本信息</h4>
            <div class="table-detail" v-if="detailData">
                <el-form label-width="100" label-position="right">
                    <div class="form_sction">
                        <el-form-item label="申请类型:">
                            <span>{{ options6[detailData.type - 1].name }}</span>
                        </el-form-item>
                        <el-form-item label="服务商配件类型:" v-if="detailData.type == 2">
                            <span>{{ options3[detailData.networkSpareType - 1].name }}</span>
                        </el-form-item>
                    </div>
                    <el-row>
                        <el-col :md="8">
                            <el-form-item label="收货地址类型:">
                                <el-select placeholder="收货地址类型" clearable v-model="dataList.receiptAddrType"
                                    @change="changeAddrType" class="item-input">
                                    <el-option v-for="item in options4" :value="item.value" :label="item.name" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8">
                            <el-form-item label="收货人姓名:">
                                <el-input placeholder="收货人姓名" clearable class="item-input"
                                    v-model="dataList.receiptName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :md="8">
                            <el-form-item label="收货人手机号:">
                                <el-input v-model="dataList.receiptPhone" :maxlength="11"
                                    @input="dataList.receiptPhone = dataList.receiptPhone.replace(/\D/g, '')" clearable
                                    placeholder="收货人手机号" class="item-input item-input-phone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :xs="24" :lg="8">
                            <el-form-item label="收货人地址:">
                                <SingleAddress ref="addrsDom" :address="addrs" />
                            </el-form-item>
                            <el-form-item label="旧件处理方式:">
                                <el-select placeholder="旧件处理方式" v-model="dataList.oldCopeWay" @change="changeoldCopeWay"
                                    class="item-input">
                                    <el-option v-for="item in options7" :value="item.value" :label="item.name" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :lg="8">
                            <el-form-item label="详细地址:">
                                <el-input placeholder="收货人详细地址" :rows="2" clearable type="textarea" size="small"
                                    show-word-limit maxlength="200" class="item-input_w"
                                    v-model="dataList.receiptAddress"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <div class="form_sction" v-if="dataList.oldCopeWay == 2">
                        <el-form-item label="退回仓库:">
                            <el-select placeholder="请选择仓库" filterable clearable v-model="dataList.storeId"
                                class="item-input" :remote-method="inputValueSch" @change="changestoreId" :loading="loading"
                                remote remote-show-suffix>
                                <el-option v-for="item in modules" :value="item.id" :label="item.name"
                                    @click="changestoreId(item)" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="退回仓位" v-if="!faultsStorePositionFun(dataList.storeId)">
                            <el-select placeholder="退回仓位" filterable clearable
                                :disabled="faultsStorePositionFun(dataList.storeId)" v-model="dataList.storePositionId"
                                :remote-method="(val: any) => getStoreSelecPotList(val, dataList.storeId)"
                                :loading="loading" remote remote-show-suffix>
                                <el-option v-for="item in storePositionPageSelectList" :value="item.id"
                                    :label="item.name" />
                            </el-select>
                        </el-form-item>

                    </div>
                    <el-form-item class="form_sction" v-if="dataList.oldCopeWay == 2 && dataList.storeId">
                        <span class="look_text">姓名：{{ dataList.oldReceiptName }}</span>
                        <span class="look_text">手机号：{{ dataList.oldReceiptPhone }}</span>
                        <span class="look_text">旧件收货地址：{{ dataList.oldReceiptProvince + dataList.oldReceiptCity +
                            dataList.oldReceiptArea + dataList.oldReceiptTown +
                            dataList.oldReceiptAddress }}
                        </span>
                    </el-form-item>
                </el-form>
            </div>
            <div class="table">
                <el-table :border="true" stripe resizable height="280px" :data="dataList.workSpareMaterials">
                    <el-table-column show-overflow-tooltip label="序号" fixed="left" min-width="50">
                        <template v-slot="i">
                            {{ i.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="审核状态" width="120">
                        <template #default="scope">
                            <el-select placeholder="审核状态" v-model="scope.row.status" filterable clearable>
                                <el-option v-for="item in options2" :value="item.value" :label="item.name"
                                    :disabled="item.value === 1" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="结算类型" width="150" show-overflow-tooltip>
                        <template #default="scope">
                            <el-select placeholder="结算类型" v-model="scope.row.type" filterable clearable>
                                <el-option v-for="item in options1" :value="item.value" :key="item.value"
                                    :label="item.name" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="申请的配件物料" width="240" show-overflow-tooltip>
                        <template v-slot="i">
                            {{ i.row.applySpareModel }}、{{ i.row.applySpareSpec }}、{{ i.row.applySpareSpecCode }}
                        </template>
                    </el-table-column>
                    <el-table-column label="配件名称" width="240">
                        <template #default="scope">
                            <el-select placeholder="请选择" filterable clearable v-model="scope.row.spareId"
                                :remote-method="(val) => sparePageSelectList(val, scope.$index)" :loading="loading2"
                                @change="(id: any) => changeSpareId(id, scope.$index)" remote remote-show-suffix>
                                <el-option v-for="item in scope.row.spareSelect" :value="item.id" :label="`${item.model}`"
                                    @click="clickSpareId(item, scope.$index)" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" width="180">
                        <template #default="scope">
                            <el-select placeholder="请选择" filterable clearable v-model="scope.row.specId"
                                :remote-method="(val: any) => spareSpecPageSelectList(val, scope.row.spareId, scope.$index)"
                                :loading="loading2" remote remote-show-suffix
                                @change="(id: any) => clickspecId(id, scope.$index)">
                                <el-option v-for="item in scope.row.spareSpecSelect"
                                    @click="clickspecId(item, scope.$index)" :value="item.id" :label="item.name" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格编码" min-width="180" prop="model">
                        <template v-slot="i">
                            <el-input disabled :value="i.row.checkSpareSpecCode" readonly></el-input>
                        </template>
                    </el-table-column>
                    <template v-if="!(detailData?.networkSpareType == 3)">
                        <el-table-column label="仓库" width="180">
                            <template #default="scope">
                                <el-select placeholder="请选择" filterable clearable v-model="scope.row.storeId"
                                    @change="changeSeleStoreId('', scope.row, scope.$index)"
                                    :remote-method="(val: any) => getStoreSelectList(val, scope.$index)" :loading="loading"
                                    remote remote-show-suffix>
                                    <el-option v-for="item in scope.row.storePageSelect" :value="item.id"
                                        :label="item.name" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="仓位" width="180">
                            <template #default="scope">
                                <el-select placeholder="请选择" filterable clearable
                                    :disabled="faultsStorePositionFun(scope.row.storeId, scope.$index)"
                                    v-model="scope.row.storePositionId"
                                    @change="changeSelestorePositionId(scope.row, scope.$index)"
                                    :remote-method="(val: any) => getStoreSelecPotList(val, scope.row.storeId, scope.$index)"
                                    :loading="loading" remote remote-show-suffix>
                                    <el-option v-for="item in scope.row.storePositionPageSelect" :value="item.id"
                                        :label="item.name" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="即时库存" width="180">
                            <template #default="scope">
                                <span>{{ scope.row.systemStock }}</span>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column label="物料质保状态" width="150">
                        <template #default="scope">
                            <el-select placeholder="物料质保状态" v-model="scope.row.overinsured" filterable clearable>
                                <el-option v-for="item in options5" :value="item.value" :key="item.value"
                                    :label="item.name" />
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="申请数量" width="90">
                        <template #default="scope">
                            <el-input clearable @input="scope.row.qty = scope.row.qty.replace(/\D/g, '')"
                                v-model="scope.row.qty" placeholder="数量" />
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="单价金额" width="120">
                        <template #default="scope">
                            <el-input placeholder="填写金额" v-model="scope.row.price" @keyup="checkNum"
                                @input="scope.row.price = scope.row.price.replace(/[^\d.]/g, '')">
                                <template #prepend>￥</template>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="总金额" width="100">
                        <template #default="i">
                            <el-input :disabled="true" clearable :value="(i.row.price * i.row.qty).toFixed(2) || 0">
                                <template #prepend>￥</template>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip label="备注" min-width="140" max-width="150">
                        <template #default="scope">
                            <el-input v-model="scope.row.remark" clearable placeholder="填写备注" />
                        </template>
                    </el-table-column>
                    <el-table-column label="附件(最多上传8个)" :width="460">
                        <template #default="scope">
                            <div class="updata_pic">
                                <el-upload action="#" multiple list-type="picture-card" accept="image/*,.pdf"
                                    :auto-upload="false" :show-file-list="false"
                                    :on-change="(file) => { getProImages(file, scope.$index) }">
                                    <div class="plus_add">
                                        <el-icon size="12">
                                            <Plus />
                                        </el-icon>
                                    </div>
                                </el-upload>
                                <div class="disf_ipc" v-for="(img, index) in scope.row.images">
                                    <img :src="pdf" alt="" style="width: 100%;cursor: pointer"
                                        v-if="(img.image.replace(/.+\./, '') == 'pdf') || img.file?.type.includes('pdf')">
                                    <img class="img" :src="img.image" v-else />
                                    <span class="item-actions">
                                        <el-icon color="#fff" size="12" class="item-preview"
                                            @click="handlePictureCardPreview(img.image)"><zoom-in /></el-icon>
                                        <el-icon size="12" color="#fff" class="item-delete"
                                            @click="handleRemove(index, scope.$index)">
                                            <Delete />
                                        </el-icon>
                                    </span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="footer_remark">
                <el-form-item label="审核备注" label-width="auto">
                    <el-input class="w_input" type="textarea" size="small" show-word-limit maxlength="200"
                        :autosize="{ minRows: 2, maxRows: 4 }" v-model="dataList.remark" clearable placeholder="填写备注信息" />
                </el-form-item>
            </div>
            <div class="btns flex-justify-end">
                <el-button color="#007cff" :disabled="$route.query.isArchive=='true'" class="btn_save" @click="onSave">确认审核</el-button>
                <el-button @click="onCancel" class="btn_cancel"> 取消 </el-button>
            </div>
        </div>
    </el-dialog>
    <el-dialog v-model="dialogVisible" draggable title="查看附件" top="8vh">
        <iframe :src="`${dialogImageUrl}`" style="height: 660px;width: 100%;" frameborder="0"></iframe>
    </el-dialog>
</template>
<script lang="ts" setup>
import { ref, toRefs, watch, nextTick, reactive, onMounted } from 'vue'
// import { sparePageSelect, spareSpecPageSelect } from '../../../../api/code'
import { getGoodsStock, storePageSelect, storePositionPageSelect, storeEmpAddressPageSelect } from '../../../../api/store'
// import { checkOrderSpare, getBeforeCheckOrderSpareDetail, getOrderNetworkAddress, getWorkUserAddress, getOrderSpareMaterial } from '../../../../api/parts'
import { orderAnnexUpload } from '../../../../api/upload'
import SelectAddress from '@/components/SelectAddress/index.vue'
import SingleAddress from '@/components/address/singleAddress.vue'
import pdf from '@/assets/image/pdf.png'
import { ElMessage, ElMessageBox } from 'element-plus'
import { checkNum } from '../../../../utils/validate'
const props = defineProps({
    checkDialog: Boolean,
    partsId: String,
    workId: [String, Array]
})
const { checkDialog, partsId, workId } = toRefs(props)
const dialogVisible = ref(false)
const dialogImageUrl = ref(null)
const modules = ref(null)//仓库
const storePositionPageSelectList = ref([])//仓位
const loading = ref(false)
const loading2 = ref(false)
const emits = defineEmits(['assign-dialog', 'update-list'])
// 结算类型
const options1 = [{ name: '向服务商收取', value: 1 }, { name: '向服务商支付', value: 2 }, { name: '向客户收取', value: 3 }, { name: '向客户支付', value: 4 }]
// 服务商配件类型
const options3 = [{ name: '服务商-外部仓配件', value: 1 }, { name: '工程师-外部仓配件', value: 2 }, { name: '自购配件', value: 3 }]
// 收货地址类型
const options4 = [{ name: '工单客户', value: 1 }, { name: '服务商', value: 2 }]
// 物料质保状态
const options5 = [{ name: '保内', value: false }, { name: '保外', value: true }]
// 申请类型
const options6 = [{ name: '平台配件', value: 1 }, { name: '外部配件', value: 2 }]
// 审核状态
const options2 = [{ name: '已通过', value: 2 }, { name: '已驳回', value: 3 }]
// 旧件处理方式
const options7 = [{ name: '废弃', value: 1 }, { name: '旧件退回', value: 2 }]
let dataList = ref({
    "id": null,//工单配件ID
    "oldCopeWay": 2,//旧件处理方式：1-废弃，2-旧件退回,示例值(2)
    "oldReceiptAddress": "",//旧件收货人详细地址
    "oldReceiptArea": "",//旧件收货地址-县/区
    "oldReceiptCity": "",//旧件收货地址-市
    "oldReceiptName": "",//旧件收货人姓名
    "oldReceiptPhone": "",//旧件收货人手机号
    "oldReceiptProvince": "",//旧件收货地址-省
    "oldReceiptTown": "",//旧件收货地址-镇
    "receiptAddrType": null,//收货地址类型：1-工单客户地址，2-服务商地址
    "receiptAddress": "",//收货人详细地址
    "receiptArea": "",//收货地址-县/区
    "receiptCity": "",//收货地址-市
    "receiptName": "",//收货人姓名
    "receiptPhone": "",//收货人手机号
    "receiptProvince": "",//收货地址-省
    "receiptTown": "",//收货地址-镇
    "remark": "",//备注
    "storeId": null,//旧件退回仓库ID
    storePositionId: null, // 旧件退回仓库仓位ID
    "userOrNetworkId": null,//客户/服务商ID
    "workSpareMaterials": [//工单配件物料
        {
            "delImageIds": [],//删除的工单费用图片对象ID	
            "id": null,//配件物料ID
            "images": [
                {
                    "id": 0,
                    "image": "",
                    file: null,
                }
            ],
            "overinsured": false,//质保状态：false-保内，true-保外
            "price": 0,//配件物料单价
            "qty": 1,//配件物料数量,示例值(1)
            "remark": "",//备注
            "spareId": null,//配件ID
            "specId": null,//配件规格ID
            "status": 2,//配件物料审核状态：2-已通过，3-已驳回,示例值(2)
            "storeId": null,//仓库ID
            storePositionId: null,//仓位id
            "type": 1,//	结算类型：1-向服务商收取，2-向服务商支付，3-向客户收取，4-向客户支付,示例值(1)
            spareSelect: [],//配件
            spareSpecSelect: [],//规格
            checkSpareSpec: '',
            checkSpareSpecCode: '',
            storePageSelect: [],//仓库下拉列表
            storePositionPageSelect: [],//仓位下拉列表
            checkSpareModel: '',
            systemStock: 0//即时库存
        }
    ]
})
const detailData = ref(null)//详情
const addrsDom = ref()
const addrs = ref({// 地址
    province: "",
    city: "",
    area: "",
    town: "",
})

// 仓库选择输入变化
const valueSch = ref({ val: '', index: null })
const getStoreSelectList = (val, index) => {
    valueSch.value.val = val
    valueSch.value.index = index
}
watch(() => valueSch.value.val, (n) => {
    getstorePageSelect(valueSch.value.val, valueSch.value.index)
})
// 仓位选择输入变化
const valueSchPo = ref({ val: '', id: null, index: null })
const getStoreSelecPotList = (val, id, index = null) => {
    valueSchPo.value.val = val
    valueSchPo.value.id = id
    valueSchPo.value.index = index
}
watch(() => valueSchPo.value.val, (n) => {
    getstorePositionPageSelect(valueSchPo.value.val, valueSchPo.value.id, valueSchPo.value.index)
})

//仓库下拉变化
const changeSeleStoreId = (val, row, index) => {
    row.storePositionId = null
    //   判断是否启用仓位
    if (!faultsStorePositionFun(row.storeId, index)) {
        getstorePositionPageSelect(val, row.storeId, index)
    } else {
        changeSelestorePositionId(row, index)
    }

}
// 仓位下拉变化
const changeSelestorePositionId = (row, index = null) => {

    if (row.spareId && row.specId && row.storeId) {
        let data = {
            "goodsId": row.spareId,//商品ID
            "goodsSpecId": row.specId,//商品规格ID
            "storeId": row.storeId,//仓库ID
            "storePositionId": row.storePositionId,//仓库仓位ID，当仓库启用仓位时，此字段必传	
            "type": 2//商品类型：1-成品，2-配件
        }
        dataList.value.workSpareMaterials[index].systemStock = 0
        if (!faultsStorePositionFun(row.storeId, index)) {
            data.storePositionId = row.storePositionId
        }
        getGoodsStock(data).then(res => {
            if (res) {
                if (res.data.code == 20000) {
                    if (res.data.data.row.id) {
                        dataList.value.workSpareMaterials[index].price = res.data.data.row.price
                    }
                    dataList.value.workSpareMaterials[index].systemStock = res.data.data.row.systemStock
                }

            }

        })
    }
}
// 判断是否启用仓位
const faultsStorePositionFun = (id, index = null) => {
    let arr = []
    if (index || index == 0) {
        arr = dataList.value.workSpareMaterials[index].storePageSelect
    } else {
        arr = modules.value
    }
    if (arr) {
        for (const obj of arr) {
            if (obj.id == id) {
                return !obj.enableStorePosition
            }
        }
    }
    return true
}
// 地址类型变化
const changeAddrType = (val: any) => {
    switch (val) {
        case 1:
            getWorkUserAddressData()
            break;
        case 2:
            getOrderNetworkAddressData()
            break;
        default:
            dataList.value.receiptName = ''
            dataList.value.receiptPhone = ''
            dataList.value.receiptAddress = ''
            dataList.value.receiptProvince = ''
            dataList.value.receiptCity = ''
            dataList.value.receiptArea = ''
            dataList.value.receiptTown = ''
            addrs.value = {
                province: '',
                city: '',
                area: '',
                town: ''
            }
            addrsDom.value.clearValue()
            break
    }
}
// 旧件处理方式变化
const changeoldCopeWay = (val) => {
    switch (val) {
        case 2:
            break;
        default:
            dataList.value.oldReceiptName = ''
            dataList.value.oldReceiptPhone = ''
            dataList.value.oldReceiptAddress = ''
            dataList.value.oldReceiptProvince = ''
            dataList.value.oldReceiptCity = ''
            dataList.value.oldReceiptArea = ''
            dataList.value.oldReceiptTown = ''
            break
    }
}
// 获取用户地址
const getWorkUserAddressData = async () => {
    // await getWorkUserAddress(workId.value).then(res => {
    //     if (res.data.success) {
    //         dataList.value.userOrNetworkId = res.data.data.row.id
    //         dataList.value.receiptName = res.data.data.row.name
    //         dataList.value.receiptPhone = res.data.data.row.phone
    //         dataList.value.receiptAddress = res.data.data.row.address
    //         dataList.value.receiptProvince = res.data.data.row.province
    //         dataList.value.receiptCity = res.data.data.row.city
    //         dataList.value.receiptArea = res.data.data.row.area
    //         dataList.value.receiptTown = res.data.data.row.town
    //         addrs.value = {
    //             province: dataList.value.receiptProvince,
    //             city: dataList.value.receiptCity,
    //             area: dataList.value.receiptArea,
    //             town: dataList.value.receiptTown
    //         }
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    // })
}
// 获取服务商地址
const getOrderNetworkAddressData = async () => {
    // await getOrderNetworkAddress(workId.value).then(res => {
    //     if (res.data.success) {
    //         dataList.value.userOrNetworkId = res.data.data.row.id
    //         dataList.value.receiptName = res.data.data.row.name
    //         dataList.value.receiptPhone = res.data.data.row.phone
    //         dataList.value.receiptAddress = res.data.data.row.address
    //         dataList.value.receiptProvince = res.data.data.row.province
    //         dataList.value.receiptCity = res.data.data.row.city
    //         dataList.value.receiptArea = res.data.data.row.area
    //         dataList.value.receiptTown = res.data.data.row.town
    //         addrs.value = {
    //             province: dataList.value.receiptProvince,
    //             city: dataList.value.receiptCity,
    //             area: dataList.value.receiptArea,
    //             town: dataList.value.receiptTown
    //         }
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    // })
}
// 配件变化
const changeSpareId = (id: any, index: string | number) => {
    dataList.value.workSpareMaterials[index].specId = null
    dataList.value.workSpareMaterials[index].checkSpareSpecCode = ''
    dataList.value.workSpareMaterials[index].checkSpareSpec = ''
    dataList.value.workSpareMaterials[index].spareSpecSelect = []
    if (id) {
        spareSpecPageSelectList('', id, index)
    }
}
// 获取配件下拉数据
const sparePageSelectList = async (val: string, index) => {
    let data = {
        limit: 0,
        name: val,
        page: 0
    }
    loading2.value = true
    // await sparePageSelect(data).then(res => {
    //     if (res.data.code == 20000) {
    //         dataList.value.workSpareMaterials[index].spareSelect = res.data.data.rows
    //         res.data.data.rows.map(o => {
    //             if (dataList.value.workSpareMaterials[index].spareId == o.id) {
    //                 dataList.value.workSpareMaterials[index].checkSpareModel = o.model
    //             }
    //         })

    //         loading2.value = false
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             type: 'error',
    //             duration: 3000
    //         })
    //     }
    // })
}
// 人员仓库变化
const changestoreId = (n) => {
    if (Object.prototype.toString.call(n) === '[object Object]') {
        dataList.value.oldReceiptName = n.userName
        dataList.value.oldReceiptPhone = n.phone
        dataList.value.oldReceiptAddress = n.address
        dataList.value.oldReceiptProvince = n.province
        dataList.value.oldReceiptCity = n.city
        dataList.value.oldReceiptArea = n.area
        dataList.value.oldReceiptTown = n.town
        dataList.value.storePositionId = null
        storePositionPageSelectList.value = []
        if (!faultsStorePositionFun(n.id)) {
            getstorePositionPageSelect('', n.id)
        }

    } else {
        changeoldCopeWay(1)
    }
}
// 仓库下拉数据
const getstorePageSelect = async (val: string, index) => {
    let data = {
        limit: 0,
        name: val,
        page: 0
    }
    let networkSpareType = null
    if (detailData.value?.type == 1) {
        networkSpareType = 0
    } else {
        networkSpareType = detailData.value?.networkSpareType
    }
    await storePageSelect(data, networkSpareType).then(res => {
        if (res) {
            dataList.value.workSpareMaterials[index].storePageSelect = res.data.data.rows
            dataList.value.workSpareMaterials[index].storePositionId = null

        }

    })
}


// 仓位下拉数据
const getstorePositionPageSelect = async (val: string, storeId, index = null) => {
    let data = {
        limit: 0,
        name: val,
        page: 0
    }
    if (storeId) {
        await storePositionPageSelect(data, storeId).then(res => {
            if (res) {
                if (index || index == 0) {
                    dataList.value.workSpareMaterials[index].storePositionPageSelect = res.data.data.rows
                } else {
                    storePositionPageSelectList.value = res.data.data.rows
                }
            }
        })
    }
}

// 保存
async function onSave() {
    if (dataList.value.oldCopeWay == null) {
        dataList.value.oldCopeWay = 0
    } else if (dataList.value.oldCopeWay == 2) {
        if (dataList.value.workSpareMaterials.some(o => o.status == 2)) {
            if (!dataList.value.storeId) {
                ElMessage({
                    showClose: true,
                    message: '请选择退回的仓库！',
                    type: 'error',
                    duration: 3000,
                    offset: 200
                })
                return
            }
        }
    }
    if (dataList.value.workSpareMaterials.some(o => o.status == 1)) {
        ElMessage({
            showClose: true,
            message: '工单配件存在未审核的配件数据，请审核后重新提交',
            type: 'error',
            duration: 3000,
            offset: 200
        })
        return
    }
    for (const key in dataList.value.workSpareMaterials) {
        let imgobj = dataList.value.workSpareMaterials[key];
        if (imgobj.status == 3) {

        } else if (imgobj.status == 2) {
            // 3自购备件
            if (detailData.value.networkSpareType != 3) {
                if (!imgobj.storeId) {
                    ElMessage({
                        showClose: true,
                        message: '请选择配件仓库',
                        type: 'error',
                        duration: 3000,
                        offset: 200
                    })
                    return
                }
                if (!faultsStorePositionFun(imgobj.storeId, key)) {
                    if (!imgobj.storePositionId) {
                        ElMessage({
                            showClose: true,
                            message: '请选择配件仓位',
                            type: 'error',
                            duration: 3000,
                            offset: 200
                        })
                        return
                    }
                }

            }

        }
        loading.value = true
        if (imgobj.images.length > 0) {
            let arrimg = []
            for (let i = 0; i < imgobj.images.length; i++) {
                if (imgobj.images[i].file) {
                    arrimg = [imgobj.images[i].file]
                    imgobj.images.splice(i, 1)
                    await orderAnnexUpload(arrimg).then(res => {
                        imgobj.images.push(...res.data.data.rows.map(o => ({ id: null, image: o })))
                    })
                }
            }
        }
    }
    // await checkOrderSpare(dataList.value).then(res => {
    //     if (res.data.success) {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             type: 'success',
    //             offset: 200,
    //         })
    //         emits('update-list')
    //         onCancel()
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    //     loading.value = false
    // })
}
//仓库及人员地址下拉列表查询
const valuestoreEmpAddress = ref()
const inputValueSch = (val) => {
    valuestoreEmpAddress.value = val
}
watch(valuestoreEmpAddress, (n) => {
    getstoreEmpAddressPageSelect(n)
})
// 获取仓库人员及地址下拉
async function getstoreEmpAddressPageSelect(val) {
    loading.value = true
    let data = {
        "limit": 0,
        "name": val,
        "page": 0
    }
    let networkSpareType = 0
    // if (detailData.value?.networkSpareType != 3) {
    //     networkSpareType = detailData.value?.networkSpareType
    // }
    await storeEmpAddressPageSelect(data, networkSpareType).then(res => {
        if (res.data.success) {
            modules.value = res.data.data.rows
        } else {
            ElMessage({
                showClose: true,
                message: res.data.message,
                duration: 4000,
                offset: 200,
                type: 'error'
            })
        }
        loading.value = false
    })
}
// 获取详情
const getBeforeCheckOrderSpareDetailInfo = async (id) => {
    loading.value = true
    // await getBeforeCheckOrderSpareDetail(id).then(async res => {
    //     if (res.data.success) {
    //         detailData.value = res.data.data.row
    //         dataList.value = { ...dataList.value, ...detailData.value }
    //         if (dataList.value.oldCopeWay == 0) {
    //             dataList.value.oldCopeWay = 2
    //             getstoreEmpAddressPageSelect('')
    //         }
    //         loading.value = false
    //         setTimeout(async () => {
    //             await nextTick(async () => {
    //                 if (dataList.value.receiptAddrType == 1) {
    //                     await getWorkUserAddressData()
    //                 } else if (dataList.value.receiptAddrType == 2) (
    //                     await getOrderNetworkAddressData()
    //                 )
    //             })
    //         }, 500);
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    // })
}
// 获取列表详情
const getOrderSpareMaterialList = async (id) => {
    loading.value = true
    // await getOrderSpareMaterial(id).then(async res => {
    //     if (res.data.success) {
    //         dataList.value.workSpareMaterials = res.data.data.rows
    //         for (let i in res.data.data.rows) {
    //             dataList.value.workSpareMaterials[i].status = res.data.data.rows[i].status == 1 ? 2 : res.data.data.rows[i].status
    //             if (res.data.data.rows[i].storeId == 0) {
    //                 dataList.value.workSpareMaterials[i].storeId = null
    //             }

    //             if (res.data.data.rows[i].spareId != 0) {
    //                 await sparePageSelectList(res.data.data.rows[i].applySpareModel, i)
    //                 await spareSpecPageSelectList('', res.data.data.rows[i].spareId, i)
    //             } else {
    //                 dataList.value.workSpareMaterials[i].spareId = null
    //                 dataList.value.workSpareMaterials[i].specId = null
    //                 await sparePageSelectList('', i)
    //                 await spareSpecPageSelectList('', res.data.data.rows[i].spareId, i)
    //             }
    //             if (detailData.value.networkSpareType != 3) {
    //                 await getstorePageSelect('', i)
    //             }
    //         }
    //         loading.value = false
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             duration: 4000,
    //             offset: 200,
    //             type: 'error'
    //         })
    //     }
    // })
}

// 获取规格下拉数据
const spareSpecPageSelectList = async (val: string, id: any, index) => {
    if (!id) {
        return
    }
    let data = {
        limit: 0,
        name: val,
        page: 0
    }
    loading2.value = true
    // await spareSpecPageSelect(data, id).then(res => {
    //     if (res.data.code == 20000) {
    //         dataList.value.workSpareMaterials[index].spareSpecSelect = res.data.data.rows
    //         if (dataList.value.workSpareMaterials[index].specId) {
    //             res.data.data.rows.map(o => {
    //                 if (o.id == dataList.value.workSpareMaterials[index].specId) {
    //                     dataList.value.workSpareMaterials[index].checkSpareSpecCode = o.specSkuCode
    //                     dataList.value.workSpareMaterials[index].checkSpareSpec = o.name
    //                 }
    //             })
    //         }
    //         loading2.value = false
    //     } else {
    //         ElMessage({
    //             showClose: true,
    //             message: res.data.message,
    //             type: 'error',
    //             duration: 3000
    //         })
    //     }
    // })
}
// 点击配件
const clickSpareId = (val, index: string | number) => {
    dataList.value.workSpareMaterials[index].checkSpareModel = val.model
}
// 点击配件规格
const clickspecId = (val, index: any) => {
    if (Object.prototype.toString.call(val) === '[object Object]') {
        dataList.value.workSpareMaterials[index].checkSpareSpec = val.name
        dataList.value.workSpareMaterials[index].checkSpareSpecCode = val.specSkuCode
    } else {
        if (!val) {
            dataList.value.workSpareMaterials[index].checkSpareSpecCode = ''
            dataList.value.workSpareMaterials[index].checkSpareSpec = ''
        }
    }

}
// 查看图片
const handlePictureCardPreview = (img) => {
    dialogImageUrl.value = img
    dialogVisible.value = true
}
// 添加图片
const getProImages = (img, index) => {
    if (dataList.value.workSpareMaterials[index].images.length >= 8) {
        ElMessage({
            showClose: true,
            message: '最多上传8个',
            duration: 4000,
            offset: 200,
            type: 'error'
        })
        return
    }
    dataList.value.workSpareMaterials[index].images.push({ image: img.url, file: img.raw, id: null })
}
// 删除图片
const handleRemove = (imgindex, index) => {
    dataList.value.workSpareMaterials[index].images = dataList.value.workSpareMaterials[index].images.filter((o, i) => {
        if (i == imgindex && o.id) {
            dataList.value.workSpareMaterials[index].delImageIds.push(o.id)
        }
        return i != imgindex
    })
}
const onCancel = () => {
    emits('assign-dialog')
}
onMounted(async () => {
    if (partsId.value) {
        getBeforeCheckOrderSpareDetailInfo(partsId.value)
        await getOrderSpareMaterialList(partsId.value)
    }
})
</script>
<style lang="scss" scoped>
.top_no {
    padding-bottom: 8px;
    font-size: 12px;
    color: #999;
}

.title_top {
    border-left: 2px solid #007cff;
    line-height: 14px;
    padding-left: 6px;
    margin-bottom: 8px;
}

.operation {
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
        cursor: pointer;
        margin: 0 6px;

        &:hover {
            transform: scale(1.2);
        }
    }
}

:deep(.el-table td.el-table__cell) {
    .el-input {
        .el-input__wrapper {
            height: 28px;
        }

        .el-input-group__prepend {
            padding: 0 2px;
        }
    }
}

:deep(.el-form-item) {
    margin-right: 15px;
    margin-bottom: 14px;

    .el-cascader .el-input {
        width: 220px;
    }

    .item-input {
        width: 300px;
    }

    .item-input-phone {
        width: 180px;
    }

    .item-input_w {
        width: 300px;
    }

    .el-form-item__label {
        font-size: 12px;
    }
}

:deep(.el-form-item .el-cascader .el-input) {
    width: 300px;
}

.form_sction {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;

    .look_text {
        font-size: 12px;
        white-space: nowrap;
        margin-right: 25px;
    }
}

.footer_remark {
    margin-top: 20px;

    .w_input {
        width: 600px;
        margin-left: 10px;
    }
}

:deep(.el-upload-list--picture-card) {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row-reverse;

    .el-upload {
        width: 40px;
        height: 40px;
        margin: 0 8px 0 0;
    }

    .el-upload-list__item {
        width: 40px;
        height: 40px;
        margin: 0 8px 0 0;
    }
}

:deep(.updata_pic) {
    display: flex;
    align-items: center;

    .el-upload {
        &.el-upload--picture-card {
            width: 40px;
            height: 40px;
        }
    }

    .disf_ipc {
        display: flex;
        width: 40px;
        height: 40px;
        position: relative;
        margin-left: 6px;
        border: 1px solid #7f7f7f27;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;

        .img {
            width: 100%;
            position: absolute;
            border-radius: 4px;
        }

        .item-actions {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
        }

        &:hover .item-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #7f7f7f9d;
            opacity: 1;
            border-radius: 4px;

            .item-preview {
                margin: 0 4px;
                cursor: pointer;

                &:hover {
                    transform: scale(1.2);
                }
            }

            .item-delete {
                margin: 0 4px;
                cursor: pointer;

                &:hover {
                    transform: scale(1.2);
                }
            }
        }
    }
}

@import '../index.scss'
</style>